<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .auth-container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        
        .auth-card {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .form-label {
            font-weight: 500;
            color: #495057;
        }

        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
        }

        .auth-footer {
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid #dee2e6;
        }
        
    </style>
     <script src="D:\Webproject1\scripts\auth.js"></script>
</head>
<body>
    <div class="auth-container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h4 mb-0">用户中心</h2>
            <button id="logoutBtn" class="btn btn-outline-secondary d-none">退出登录</button>
        </div>

        <!-- 登录表单 -->
        <div id="loginForm" class="auth-card">
            <h4 class="card-title mb-4">登录系统</h4>
            <form id="loginForm">
                <div class="mb-3">
                    <label for="loginUsername" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="loginUsername" required>
                </div>
                <div class="mb-3">
                    <label for="loginPassword" class="form-label">密码</label>
                    <input type="password" class="form-control" id="loginPassword" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
            <div class="auth-footer">
                <p>没有账号？<a href="#" id="showRegister">立即注册</a></p>
            </div>
        </div>

        <!-- 注册表单 -->
        <div id="registerForm" class="auth-card d-none">
            <h4 class="card-title mb-4">创建账号</h4>
            <form id="registerForm">
                <div class="mb-3">
                    <label for="registerUsername" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="registerUsername" required>
                </div>
                <div class="mb-3">
                    <label for="registerEmail" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="registerEmail" required>
                </div>
                <div class="mb-3">
                    <label for="registerPassword" class="form-label">密码</label>
                    <input type="password" class="form-control" id="registerPassword" required>
                </div>
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">注册</button>
            </form>
            <div class="auth-footer">
                <p>已有账号？<a href="#" id="showLogin">立即登录</a></p>
            </div>
        </div>
    </div>

    <script>
        // 初始化检查登录状态
        document.addEventListener('DOMContentLoaded', () => {
            const user = JSON.parse(localStorage.getItem('currentUser'));
            if (user) {
                showUserPanel(user);
            }
        });

        // 显示用户面板
        function showUserPanel(user) {
            const container = document.querySelector('.auth-container');
            container.innerHTML = `
                <div class="auth-card">
                    <h4 class="card-title mb-4">欢迎回来，${user.username}</h4>
                    <p class="mb-4">最后登录时间：${user.lastLogin}</p>
                    <button id="logoutBtn" class="btn btn-danger w-100">退出登录</button>
                </div>
            `;
            document.getElementById('logoutBtn').addEventListener('click', handleLogout);
        }

        // 登录处理
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;

            try {
                const users = JSON.parse(localStorage.getItem('users')) || [];
                const user = users.find(u => u.username === username && u.password === password);
                
                if (user) {
                    const currentUser = {
                        ...user,
                        lastLogin: new Date().toISOString()
                    };
                    localStorage.setItem('currentUser', JSON.stringify(currentUser));
                    window.location.href = 'index.html';
                } else {
                    alert('用户名或密码错误');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录失败，请稍后再试');
            }
        });

        // 注册处理
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('registerUsername').value;
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }

            try {
                const users = JSON.parse(localStorage.getItem('users')) || [];
                if (users.some(u => u.username === username)) {
                    alert('用户名已存在');
                    return;
                }

                const newUser = {
                    username,
                    email,
                    password,
                    createdAt: new Date().toISOString(),
                    lastLogin: null
                };

                users.push(newUser);
                localStorage.setItem('users', JSON.stringify(users));
                alert('注册成功，请登录');
                document.getElementById('showLogin').click();
            } catch (error) {
                console.error('注册错误:', error);
                alert('注册失败，请稍后再试');
            }
        });

        // 表单切换
        document.getElementById('showRegister').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('loginForm').classList.add('d-none');
            document.getElementById('registerForm').classList.remove('d-none');
        });

        document.getElementById('showLogin').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('registerForm').classList.add('d-none');
            document.getElementById('loginForm').classList.remove('d-none');
        });

        // 退出登录
        function handleLogout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'index.html';
        }

        // 侧边菜单交互
        document.querySelector('.sidebar ul').addEventListener('click', (e) => {
            if (e.target.tagName === 'LI') {
                const page = e.target.dataset.page;
                if (page === 'user') {
                    window.location.href = 'user.html';
                }
            }
        });
    </script>
</body>
</html>
